<template>
    <div>
        <div class="header">
            <div class="list" @click="toggleDarkMode">
                <van-icon size="22" name="wap-nav" />
            </div>
            <div class="nav">
                <!-- 将current改为currentTag，与脚本保持一致 -->
                <div :class="{active:currentTag===1}" @click="handler(1)">我的</div>
                <div :class="{active:currentTag===2}" @click="handler(2)">发现</div>
                <div :class="{active:currentTag===3}" @click="handler(3)">云村</div>
                <div :class="{active:currentTag===4}" @click="handler(4)">视频</div>
            </div>
            <div class="search">
                <van-icon size="22" name="search" @click="goSearch" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import router from '@/router';

const currentTag = ref(1);
const searchValue = ref('');
const historyList = ref(['毛不易', '一路生花', 'Love Me No More']);
const hotList = ref(['你到底在为谁等待', '爱情讯息', '鼻塞', '两难', '我们的明天']);

const handler = (tag) => {
    currentTag.value = tag;
    router.push({
        path: tag === 1 ? '/mine' : 
              tag === 2 ? '/discover' : 
              tag === 3 ? '/cloud' : '/video'
    });
}

const toggleDarkMode = () => {
    const html = document.documentElement;
    html.classList.toggle('dark');
};

const goSearch = () => {
    router.push('/search')
}
</script>

<style lang="less" scoped>
.header {
    display: flex;
    justify-content: space-between;
    padding: 10px 10px 0;
    background-color: var(--custom-header-bg, #fff);
    
    .nav {
        width: 180px;
        display: flex;
        justify-content: space-around;
        
        .active {
            font-weight: bold;
            font-family: "微软雅黑";
            color: var(--custom-header-text-active, rgb(0, 0, 0));
        }
    }
}
.search-popup {
  background: var(--van-background-color, #fff);
  height: 100%;
  padding: 10px;
}
.title {
  font-weight: bold;
  margin: 10px 0 5px 0;
}
.history-list, .hot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.history-item, .hot-item {
  background: #f4f4f4;
  color: #333;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 13px;
}
</style>